import { FC, useEffect, useState } from "react";
import { Table, Typography, Pagination } from 'antd'
import { useParams } from "react-router-dom";
import { QuestionInfoType } from "../../../store/ComponentReducer";
import { getQuestionStatInfo } from "../../../service";
import useGetPageInfo from "../../../hooks/useGetPageInfo";
import { useRequest } from "ahooks";
import style from './index.module.scss'
import classnames from 'classnames/bind'
import { componentPropsType } from "../../../questioncomponents";
const CBN = classnames.bind(style)
const { Title } = Typography
type StatTableType = {
    componentList: QuestionInfoType[],
    selectedId: string,
    setSelectedId: (id: string) => void,
    setComponentProps:(props:componentPropsType)=>void
}

const StatTable: FC<StatTableType> = (props) => {
    const { id = '' } = useParams()
    const { componentList = [], selectedId, setSelectedId ,setComponentProps} = props
    const { title } = useGetPageInfo()
    const [list, setList] = useState([])
    const [total, setTotal] = useState(0)
    let [rowkey, setRowkey] = useState(0)
    let [page,setPage] = useState(1)
    let [pagesize,setPagesize] = useState(10)
    const { loading } = useRequest(() => {
        return getQuestionStatInfo(id)
    }, {
        onSuccess(res) {
            const data = res.list
            const total = res.total
            setList(data)
            setTotal(total)
        },
        refreshDeps:[page,pagesize]
    })
    const ClickTableHead = (fe_id: string) => {
        setSelectedId(fe_id)
    }
    const columns = componentList.map((item) => {
        const { title, fe_id } = item
        return {
            title: (
                <div className={selectedId == fe_id ? CBN('isSelected') : ""} onClick={() => {
                    ClickTableHead(fe_id)
                }}>
                    {title}
                </div>
            ),
            dataIndex: fe_id,
        }
    })

    return <div className={CBN('TableContainer')}>
        <Title>{title}</Title>
        <div className={CBN('tableBox')}>
            <Table
                onRow={(record, index) => {
                    return {
                        onClick: (event) => {
                            event.stopPropagation()
                            setRowkey(index!)
                            setComponentProps(record)
                        }, // 点击行
                    };
                }}
                rowClassName={(_,index)=>{
                    return index === rowkey ? CBN('selectedRow') : ''
                }}
                loading={loading}
                columns={columns}
                dataSource={list.map((item: any,index) => {
                    item.key = index;
                    return item
                })}
                pagination={false} />
        </div>
        <div className={CBN('tablepageBox')}>
            <Pagination total={total} current={page} pageSize={pagesize} onChange={(page)=>{
                setPage(page);
            }} onShowSizeChange={(page,pageSize)=>{
                setPage(page);
                setPagesize(pageSize)
            }}/>
        </div>

    </div>
}

export default StatTable